<template>
  <div>
    <el-form-item label="表格详情配置">
      <el-scrollbar style="width: 100%; padding-bottom: 20px">
        <draggable
          tag="ul"
          :list="localData.options.column"
          :group="{ name: 'dic' }"
          handle=".drag-item"
          style="min-width: 800px"
        >
          <li v-for="(item, index) in localData.options.column" :key="index">
            <i
              class="drag-item el-icon-s-operation"
              style="font-size: 16px; margin: 0 5px; cursor: move"
            ></i>
            <span> 名称： </span>
            <el-input
              style="margin-right: 5px; width: 100px"
              size="default"
              clearable
              v-model="item.label"
              placeholder="label"
            />
            <span> 属性值： </span>
            <el-input
              :style="{ 'margin-right': '5px', width: '100px' }"
              size="default"
              clearable
              v-model="item.prop"
              placeholder="prop"
            />
            <span> 是否搜索： </span>
            <el-switch v-model="item.search" />
            <!--          <el-input :style="{'margin-right': '5px'}"-->
            <!--                    size="mini"-->
            <!--                    clearable-->
            <!--                    v-model="item.value"-->
            <!--                    placeholder="value"></el-input>-->
            <el-button
              @click="handleRemoveFields(index)"
              circle
              plain
              type="danger"
              size="default"
              icon="el-icon-minus"
              style="padding: 4px; margin-left: 5px"
            />
          </li>
        </draggable>
        <div style="margin-left: 22px">
          <el-button link @click="handleAddFields">添加列 </el-button>
        </div>
      </el-scrollbar>
    </el-form-item>
  </div>
</template>

<script>
import Draggable from 'vuedraggable'
export default {
  name: 'CrudTableConfig',
  components: { Draggable },
  props: {
    data: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      localData: {}
    }
  },
  watch: {
    data: {
      handler(newVal) {
        if (newVal) {
          this.localData = newVal
        }
      },
      deep: true,
      immediate: true
    },
    localData: {
      handler(newVal) {
        this.$emit('update:data', newVal)
      },
      deep: true
    }
  },
  methods: {
    handleRemoveFields(index) {
      this.localData.options.column.splice(index, 1)
    },
    handleAddFields() {
      const i = Math.ceil(Math.random() * 99999)
      if (!this.localData.options?.column) {
        this.$set(this.localData.options, 'column', [{ label: `字段${i}`, prop: `col_${i}` }])
      } else {
        this.localData.options.column.push({ label: `字段${i}`, prop: `col_${i}` })
      }
    }
  }
}
</script>
